@extends('admin::layouts.master')
@section('content')
    <div class="card" id="app">
        <div class="card-header">轮播图管理</div>
        <ul role="tablist" class="nav nav-tabs">
            <li class="nav-item"><a href="/slider" class="nav-link">轮播图列表</a></li>
            <li class="nav-item"><a href="#" class="nav-link active">添加轮播图</a></li>
        </ul>
        <form action="/slider/slider" method="post">
            <div class="card-body card-body-contrast">
                @csrf
                <div class="form-group row">
                    <label for="title" class="col-12 col-sm-3 col-form-label text-md-right">标题</label>
                    <div class="col-12 col-md-9">
                        <input id="title" name="title" type="text"
                               value="{{ $article['title']??old('title') }}"
                               class="form-control form-control-sm form-control{{ $errors->has('title') ? ' is-invalid' : '' }}">
                        @if ($errors->has('title'))
                            <span class="invalid-feedback" role="alert">
                <strong>{{ $errors->first('title') }}</strong>
            </span>
                        @endif
                    </div>
                </div>
                <div class="form-group row">
                    <label for="thumb" class="col-12 col-sm-3 col-form-label text-md-right">缩略图</label>
                    <div class="col-12 col-lg-9">
                        {{--<hd-image name="thumb" id="thumb" image-url=""></hd-image>--}}
                        <div class="input-group mb-1">
                            <input class="form-control  form-control-sm" name="thumb" readonly="" value="">
                            <div class="input-group-append">
                                <button onclick="upImagePc(this)" class="btn btn-secondary" type="button">单图上传</button>
                            </div>
                        </div>
                        <div style="display: inline-block;position: relative;">
                            <img src="/images/default.jpg" class="img-responsive img-thumbnail" width="150">
                            <em class="close" style="position: absolute;top: 3px;right: 8px;" title="删除这张图片"
                                onclick="removeImg(this)">×</em>
                        </div>
                    </div>
                    <script>
                        require(['hdjs', 'bootstrap']);

                        //上传图片
                        function upImagePc() {
                            require(['hdjs'], function (hdjs) {
                                var options = {
                                    multiple: false,//是否允许多图上传
                                    //data是向后台服务器提交的POST数据
                                    data: {name: '后盾人', year: 2099},
                                };
                                hdjs.image(function (images) {
                                    //上传成功的图片，数组类型
                                    $("[name='thumb']").val(images[0]);
                                    $(".img-thumbnail").attr('src', images[0]);
                                }, options)
                            });
                        }

                        //移除图片
                        function removeImg(obj) {
                            $(obj).prev('img').attr('src', '../dist/static/image/nopic.jpg');
                            $(obj).parent().prev().find('input').val('');
                        }
                    </script>
                </div>
                <div class="form-group row">
                    <label for="title" class="col-12 col-sm-3 col-form-label text-md-right">跳转地址</label>
                    <div class="col-12 col-md-9">
                        <input id="title" name="url" type="text"
                               value="{{ $article['title']??old('title') }}"
                               class="form-control form-control-sm form-control{{ $errors->has('url') ? ' is-invalid' : '' }}">
                        @if ($errors->has('url'))
                            <span class="invalid-feedback" role="alert">
                <strong>{{ $errors->first('url') }}</strong>
            </span>
                        @endif
                    </div>
                </div>
                <div class="form-group row">
                    <label for="title" class="col-12 col-sm-3 col-form-label text-md-right">前台是否显示</label>
                    <div class="col-12 col-md-9">
                        <div class="col-12 col-sm-8 col-lg-6 form-check mt-2">
                            <label class="custom-control custom-radio custom-control-inline">
                                <input type="radio" name="is_show" checked="" value="1" class="custom-control-input"><span
                                        class="custom-control-label">是</span>
                            </label>
                            <label class="custom-control custom-radio custom-control-inline">
                                <input type="radio" name="is_show" class="custom-control-input" value="0"><span
                                        class="custom-control-label">否</span>
                            </label>

                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer text-muted">
                <button class="btn btn-primary offset-sm-2">保存提交</button>
            </div>
        </form>
    </div>
@endsection
